<template>
    <div class="discover">
        <van-search ref="input"
                    v-model="value"
                    placeholder="请输入搜索关键词"
                    shape="round"
                    background="#ffcd32"
                    @search="toSearch"
                    @input="isValueChange"
        />
        <div class="search-tips" v-if="!isToSearch">
            <div class="tag-box">
                <div class="tag-title">热门：</div>
                <van-divider/>
                <van-tag plain class="tag-content"
                         size="large"
                         v-for="(tag,idx) in tags"
                         :key="idx"
                         @click="onClickTag"
                >{{tag}}
                </van-tag>
            </div>
            <div class="tag-box" v-if="historys.length > 0">
                <div class="tag-title">
                    <span class="tag-title-txt">历史搜索：</span>
                    <van-icon name="delete" class="icon-delelte"
                              size="20" color="red" @click="onClearHistory"/>
                </div>
                <van-divider/>
                <van-tag plain class="tag-content"
                         size="large"
                         v-for="(history,idx) in historys"
                         :key="idx"
                         @click="onClickTag"
                >{{history}}
                </van-tag>
            </div>
        </div>
        <div class="search-result" v-else>
            <audio-lists :items="audios" v-if="showLists"></audio-lists>
            <van-empty image="search" description="暂无内容" v-else/>
        </div>
    </div>
</template>

<script>
    import Scroll from "@/components/scroll/scroll";
    import AudioLists from '@/components/audio-lists/audio-lists';
    import storage from 'good-storage'
    import Vue from 'vue';
    import {
        Search
        , Empty
        , NoticeBar
        , Tag
        , Divider
        , Icon
        , Dialog
    } from 'vant';

    Vue.use(Search)
        .use(Empty)
        .use(NoticeBar)
        .use(Tag)
        .use(Divider)
        .use(Icon)
        .use(Dialog);

    const ERR_OK = 1;
    // 缓存索引 - 搜索记录
    const HSK = "HistorySearchKey";

    export default {
        name: "discover",
        created() {
            this.$store.commit("setPlayerStatus", false);
            this.historys = storage.get(HSK) || [];
        },
        destroyed() {
            this.$store.commit("setPlayerStatus", true);
        },
        data() {
            return {
                value: "",
                isToSearch: false,
                tags: [
                    "家庭","哲学", "工作", "学习", "睡眠革命", "情绪","佛", "非暴力沟通"
                ],
                historys: [],
                audios: [],
                showLists: false
            }
        },

        methods: {
            // 点击标签，直接搜素
            onClickTag(e) {
                // 聚焦
                this.$refs.input.focus();
                this.value = e.target.firstChild.data.replace(/(^\s*)|(\s*$)/g, "");
                this.toSearch();
            },
            onClearHistory() {
                Dialog.confirm({
                    title: '清空搜索记录',
                    message: '即将清空全部历史搜索记录，该操作不可恢复哦',
                })
                    .then(() => {
                        // on confirm
                        this.historys = [];
                        storage.set(HSK, []);
                    });
            },
            // to 搜索
            toSearch() {
                var historys = this.historys;
                var value = this.value;
                if (value.length > 0) {
                    this.isToSearch = true;
                    var idx = historys.indexOf(value);
                    (idx >= 0) && historys.splice(idx, 1);
                    historys.unshift(this.value);
                    (historys.length > 12) && historys.pop();
                    // 记录保存
                    storage.set(HSK, historys);
                    this.historys = historys;
                    // 结果展示
                    this.getAudioLists();
                }
            },
            // 搜索结果
            getAudioLists() {
                var params = {
                    key: this.value
                };
                this.$http.get("/resource/getAudioLists", {
                    params
                }).then((response) => {
                    var rs = response.data;
                    if (rs.code === ERR_OK) {
                        this.audios = rs.data;
                        this.showLists = !!(this.audios.length > 0);
                    }
                });
            },
            // 监听值改变
            isValueChange() {
                if (this.value.length <= 0) {
                    this.isToSearch = false;
                }
            }
        },
        components: {
            Scroll,
            [Dialog.Component.name]: Dialog.Component,
            AudioLists
        }
    }
</script>

<style scoped>
    .tag-box {
        padding-left: 10px;
    }

    .tag-title {
        margin-top: 20px;
    }

    .tag-content {
        margin: 3px auto;
        margin-left: 5px;
    }

    .icon-delelte {
        float: right;
        margin-right: 10px;
    }

    .search-result >>> .audios {
        margin-top: 60px;
    }
</style>